<template>
<div>
  <div class="list-group">
    <a v-for="item in items" v-if="item.hide === '0'" class="list-group-item project" @click="this.$router.go('/project/' + item.hash)">
      <div style="position: relative;">
        <span class="float-top-left"><small>{{item.group}}</small></span>
        <span class="float-top-right" :style="{backgroundColor: item.tagColor}">&nbsp;</span>
      </div>
      <div class="project-title"><b>{{item.name}}</b></div>
      <div>{{{item.summary}}}</div>
      <div><b>{{item.createdTime}}</b><br /><b>{{item.createdBy}}</b></div>
      <div class="float-bottom-right" @click.stop="edit($index)"><span class="glyphicon glyphicon-pencil"></span></div>
    </a>
    <a data-toggle="modal" data-target="#projInfo" class="list-group-item project" @click="add()">
      <span class="glyphicon glyphicon-plus"></span>
    </a>
    <button id="refresh-btn" class="btn btn-default project" @click="refresh()">
      <span class="glyphicon glyphicon-refresh"></span>
    </button>
  </div>

  <div class="modal fade" id="projInfo" tabindex="-1" role="dialog" aria-labelledby="modalTitle">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="modalTitle">{{modalType === 'add' ? 'Add Project' : 'Edit Project'}}</h4>
        </div>
        <div class="modal-body">
          <label>Project Hash:</label>
          <p>{{modalItem.hash}}</p>
          <label>Project Group:</label>
          <p v-if="this.$root.$get('user.group') != 'admin'">{{modalItem.group}}</p>
          <input type="input" class="form-control" v-if="this.$root.$get('user.group') === 'admin'" v-model="modalItem.group" /> 
          <label for="_name">Project name:</label>
          <input id="_name" class="form-control" type="input" placeholder="Project name here..." v-model="modalItem.name" />
          <label for="_color">Tag color:</label>
          <input id="_color" class="form-control" type="input"
            placeholder="This attr will be the css `background-color` attr" v-model="modalItem.tagColor" />
          <label for="_summary">Summary:</label>
          <textarea id="_summary" class="form-control" cols="10"
            placeholder="Project summary here..." v-model="modalItem.summary"></textarea>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" @click="modalCommit">Commit</button>
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<script>
/* global $, alert */
import config from '../config'

export default {
  route: {
    data: function (transition) {
      config.ensureLogin(this.$root)
      document.title = 'Home - ' + config.title
      this.refresh(transition)
    }
  },
  data () {
    return {
      items: [],
      modalType: 'add',
      modalItem: {},
      modalIndex: 0
    }
  },
  methods: {
    refresh (transition) {
      this.$http.get(config.apiPath + '/project', {
        credentials: true
      }).then((response) => {
        // show the list
        if (!transition) {
          this.$set('items', response.data)
          $('#refresh-btn').prop('disabled', true)
          setTimeout(() => {
            $('#refresh-btn').prop('disabled', false)
          }, 3000)
        } else {
          transition.next({
            items: response.data
          })
        }
        console.log(response)
      }, (response) => {
        if (response.status === 401) {
          this.$router.go('/login')
          return
        }
        alert('error ' + response.status + '\n' + response.body)
      })
    },
    edit: function (index) {
      this.$set('modalType', 'edit')
      // 避免建立双向绑定
      this.$set('modalIndex', index)
      this.$set('modalItem', config.cloneItem(this.items[index]))
      $('#projInfo').modal('show')
    },
    add: function () {
      this.$set('modalType', 'add')
      this.$set('modalItem', {
        hash: '[auto]',
        group: this.$root.$get('user.group'),
        name: 'New Project',
        tagColor: '',
        summary: '',
        createdBy: this.$root.$get('user.name')
      })
    },
    modalCommit () {
      switch (this.modalType) {
        case 'add':
          console.log('http - add project:')
          console.log(this.modalItem)
          this.$http.post(config.apiPath + '/project', this.modalItem, {credentials: true, emulateJSON: true}).then((response) => {
            this.$set('items[' + this.items.length + ']', config.cloneItem(response.data))
          }, (response) => {
            console.log(response)
            alert('error ' + response.status + '\n' + response.body)
          })
          break
        case 'edit':
          if (config.itemEquals(this.items[this.modalIndex], this.modalItem)) {
            break
          }
          console.log('http - edit project to:')
          console.log(this.modalItem)
          this.$http.patch(config.apiPath + '/project/' + this.modalItem.hash, this.modalItem, {credentials: true, emulateJSON: true}).then((response) => {
            console.log(response)
            this.$set('items[' + this.modalIndex + ']', config.cloneItem(response.data))
          }, (response) => {
            console.log(response)
            alert('error ' + response.status + '\n' + response.body)
          })
          break
        default:
          alert('Unknown modal type! Please contact admin.')
          return
      }
      $('#projInfo').modal('hide')
    }
  }
}
</script>

<style>
.project-title {
  font-size: 2em;
  font-family: Microsoft YaHei;
  text-align: center;
}

.project {
  text-align: center;
  margin-bottom: 10px;
  width: 50%;
  margin-left: 25%;
  cursor: pointer;
}

.float-top-left {
  position: absolute;
  top: -10px;
  left: 0px;
}

.float-top-right {
  position: absolute;
  top: 0px;
  right: 5px;
  width: 10px;
  height: 10px;
}

.float-bottom-right {
  position: absolute;
  bottom: 10px;
  right: 15px;
}
</style>
